<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>餐饮网站--2</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="index2.css">
</head>
<body>

<div class="container">
    <p class="visible-xs">现在是xs</p>
    <p class="visible-sm">现在是sm</p>
    <p class="visible-md">现在是md</p>
    <p class="visible-lg">现在是lg</p>
</div>

<!-- 第一部分 -->

	<nav  class="navbar-default navbar-new">
		<div class="container-fluid">

			<div class="container">
				<div class="navbar-hader">
					<a href="" class="navbar-brand"><img src="images/logo.png" >
					</a>
				
				<!-- data-toggle="collapsed"---触发点---以什么事件触发
					data-target="#navbar-collapse"---目标执行点--事件的目标 -->
					<button style="margin-top: 25px;" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
						<span class="sr-only text-muted">汉堡按钮</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				

				<div class="collapse navbar-collapse " id="navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="#">主页</a></li>
						<li><a href="#">餐厅</a></li>
						<li><a href="#">健康</a></li>
						<li><a href="#">话题</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
					
					
					<div class="navbar-right">
						<a href="#">
							<h3><span>￥0.00 <img src="images/bao.png" alt=""></span></h3>
						</a>
					</div>
					
				</div>

			</div>

		</div>
	</nav>



<!-- 第二部分 -->


<div class="search">
<div class="container" >
	<div class="reservation">
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<div class="col-sm-12 col-md-12 col-lg-12">
				<input type="text" class="input-lg form-control col-md-12" placeholder="请输入餐厅名字">
			</div>
		</div>
		

		<div class="form-group">
			<div class="col-sm-12 col-md-12 col-lg-12">
				<select  id="counrry" class="form-control input-lg">
					<option value="null">请选择城市</option>
					<option value="beijing">北京</option>
					<option value="beijing">北京</option>
					<option value="beijing">北京</option>
				</select>
			</div>
		</div>

		<div class="form-group">
			<div class="searchbtn">
				<button type="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-search"></span>搜索</button>
			</div>

		</div>


	</form>
	</div>
</div>
</div>



<!-- 第三部分 -->


<div class="hot">
    <div class="container">
    <div class="row">
        <div class="col-md-4 ">
            <h3>米西奈斯煎饼</h3>
            <img src="images/2.jpg" class="img-responsive" alt="">
            <div style="margin-top:15px;">
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span ><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥45.00</h6></span>
                </div>
            </div>
        </div>

         <div class="col-md-4 ">
            <h3>米西奈斯煎饼</h3>
            <img src="images/2.jpg" class="img-responsive" alt="">
            <div style="margin-top:15px;">
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span ><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥45.00</h6></span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <h3>香酥鸡排</h3>
            <img src="images/2.jpg" class="img-responsive" alt="香酥鸡排">
            <div style="margin-top:15px;">
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                    <span><a class="morebtn " href="#">添加到购物车</a></span>
                    <span><h6>一口价 ：￥65.00</h6></span>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<br>

<!-- 第四部分 -->

<div class="container" style="border:1px solid #000">
	<div class="choose">
		<div class="row">
			<div class="col-md-12">
				<div class="navbar-header hidden-xs">
					<a href="#"> <img src="images/(1).jpg" alt="" sizes="150px"> </a>
				</div>
				<ul class="nav nav-pills navbar-right" role="tablist" >
					<li  role="presentation" class="active"><a href="#caipin" data-toggle="tab" role="tab">菜品</a></li>
					<li role="presentation" ><a href="#yinpin" data-toggle="tab" role="tab">饮品</a></li>
					<li role="presentation" ><a href="#zhushi" data-toggle="tab" role="tab">主食</a></li>
				</ul>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<div class="tab-content text-center">
					
					<!-- 菜品 -->
					<div class="tab-pane active" id="caipin">
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
						<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6"> 
							<img src="images/(2).jpg" alt="">
							<p>菜品</p>
							<p>￥145.0</p>
						</div>
					</div>

					<!-- 饮品 -->
					<div class="tab-pane" id="yinpin">
						<div class="product-item col-md-2 col-sm-2 col-lg-2 col-xs-6">
							<img src="images/(5).jpg" alt="">
							<p>饮品</p>
							<p>￥145.0</p>
						</div>

						<div class="product-item col-md-2 col-sm-2 col-lg-2 col-xs-6">
							<img src="images/(5).jpg" alt="">
							<p>饮品</p>
							<p>￥145.0</p>
						</div>
					</div>

					<!-- 主食 -->
					<div class="tab-pane" id="zhushi" role="tanpanel">
						<div class="col-md-2 col-lg-2 col-xs-6">
							<img src="images/(9).jpg" alt="">
							<p>主食</p>	
							<p>￥145.0</p>
						</div>
						<div class="col-md-2 col-lg-2 col-xs-6">
							<img src="images/(9).jpg" alt="">
							<p>主食</p>
							<p>￥145.0</p>
						</div>
						<div class="col-md-2 col-lg-2 col-xs-6">
							<img src="images/(9).jpg" alt="">
							<p>主食</p>
							<p>￥145.0</p>
						</div>
					</div>

				</div>
			</div>

		</div>


	</div>
</div>


<!-- 第五部分   轮播图 -->
	
<div class="carousel">
<div class="container">

	<div class="carousel" id="lunbo">

		<ol class="carousel-indicators">
			<li data-target="#lunbo" data-slide-to="0" class="active"></li>
			<li data-target="#lunbo" data-slide-to="1"></li>
			<li data-target="#lunbo" data-slide-to="2"></li>
		</ol>

		<div class="carousel-inner">
			<div class="item fade in active"><img src="images/banner2.jpg" alt=""></div>
			<div class="item "><img src="images/3.jpg" alt=""></div>
			<div class="item "><img src="images/4.jpg" alt=""></div>
		</div>

		<a href="#lunbo" class="left carousel-control" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>

		<a href="#lunbo" class="right carousel-control" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>



</div>
</div>


<br>

<!-- 第五部分 -->

<footer>

	<div class="container">
		<div class="footer-left">
			<p>Copyrights © 2016 Bootstrap 响应式餐饮网站  | 版权所有 </p>
		</div>
		<div class="footer-right">
			<ul>
				<li><a href="#"><i class="glyphicon glyphicon-phone-alt"></i>联系我们</a></li>
				<li><a href="#"><i class="glyphicon glyphicon-map-marker"></i>联系我们</a></li>
				<li><a href="#"><i class="glyphicon glyphicon-question-sign"></i>联系我们</a></li>
			</ul>
		</div>
	</div>

</footer>








<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
	<script src="lib/jquery/jquery-1.11.0.min.js"></script>
	<script src="lib/lib/js/bootstrap.min.js"></script>
</body>
</html>